<template>
    <div class="stat-bubble" :class="type+ '-bubble'" :style="bubbleStyle">
        <img :src="require('../svg/' + type + '-bubble.svg')" alt="">
        <div class="counter">{{value}}</div>
    </div>
</template>

<script>
export default {
    props: ['type', 'value', 'ratio', 'worldRatio'],
    computed: {
        bubbleStyle () {
            return {
                top: (this.ratio * 220 + 40) * this.worldRatio + 'px',
            }
        }
    }
}
</script>

<style>

</style>
